<template>
    <div
        style="padding-top: 40px"
        v-loading="pageLoading"
        element-loading-text="正在加载,请稍等"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <div style="margin: 5px 10px 30px 15px">
            <div>
                <el-form :model="infoForm" ref="infoForm" style="margin-top: 15px">
                    <el-row :gutter="30">
                        <el-col :span="6">
                            <el-form-item label="公司名称">
                                <el-input v-model="infoForm.companyName" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item label="银行卡号">
                                <el-input v-model="infoForm.bankCard" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item label="开户行">
                                <el-input v-model="infoForm.openingBank" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row :gutter="30">
                        <el-col :span="6">
                            <el-form-item label="开户人">
                                <el-input v-model="infoForm.openingMan" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="6">
                            <el-form-item label="手机号">
                                <el-input v-model="infoForm.phone" placeholder="" :disabled="isEdit"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="身份证正面">
                                <viewer :images="infoForm.idcardFront">
                                    <img :src="infoForm.idcardFront" class="viewer_img" />
                                </viewer>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="身份证反面">
                                <viewer :images="infoForm.idcardReverse">
                                    <img :src="infoForm.idcardReverse" class="viewer_img" />
                                </viewer>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>

        <!--  1.审核操作 -->

        <div style="margin: 30px 10px 60px 10px">
              
            <div>
                <span>审核情况</span>
            </div>

            <div style="margin: 30px 30px 60px 30px">
                <el-row :gutter="8">
                    <el-col :span="6"> <div>审批人</div> </el-col>
                    <el-col :span="18">
                        <el-col :span="6"><div>审核状态</div></el-col>
                        <el-col :span="6"><div>审批时间</div></el-col>
                        <el-col :span="6"><div>审批原因</div></el-col>
                    </el-col>
                </el-row>
                <el-row :gutter="20" style="margin-top: 12px">
                    <el-col :span="6">
                        <div v-for="(item, index) in flowLogRes" :key="index" :title="item.curApproverId" :style="item.style">
                            {{ item.curApproverId }}
                        </div>
                    </el-col>

                    <el-col :span="18">
                        <div v-for="(item, index) in flowLogRes" :key="index" :style="item.style">
                            <el-row>
                                <el-col :span="6">
                                    <div>{{ item.status }}</div>
                                </el-col>

                                <el-col :span="6">
                                    <div>{{ item.approveTime }}</div>
                                </el-col>

                                <el-col :span="6">
                                    <div>{{ item.advise }}</div>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <div v-if="this.opShow">
            <div style="margin: 30px 10px 30px 10px">
                <el-form :model="dataForm" ref="dataForm">
                    <el-form-item label="审核意见">
                        <el-input v-model="dataForm.checkReason" placeholder="输入审核意见" type="textarea"></el-input>
                    </el-form-item>
                </el-form>
            </div>

            <el-row type="flex" justify="center" style="margin: 30px 10px 60px 10px">
                <div>
                    <span slot="footer" class="dialog-footer">
                        <el-button type="primary" @click="dataFormSubmit(0)">通过</el-button>
                        <el-button type="primary" @click="dataFormSubmit(1)">拒绝</el-button>
                        <el-button @click="closePage()">取消</el-button>
                    </span>
                </div>
            </el-row>
        </div>
    </div>
</template>
<script>
import API from '@/api';
import cloneDeep from 'lodash/cloneDeep';

export default {
    components: {},
    data() {
        return {
            pageLoading: false,
            isEdit: true,

            //- 基础信息
            infoForm: {
                companyName: '', // 公司名称
                bankCard: '', // 银行卡号
                openingMan: '', // 开户人
                openingBank: '', // 开户行
                phone: '', // 手机号
                idcardFront: '', // 身份证正面
                idcardReverse: '' // 身份证反面
            },

            //- 审批情况
            flowLogRes: [],

            //- 审核状态
            dataForm: {
                checkReason: '' //审批原因
            },

            //- 公用
            opShow: true,
            pageFlag: '',
            pageData: null
        };
    },
    mounted() {
        var itemData = this.$route.query.itemData;
        var type = this.$route.query.type;
        if (type == 2) {
            var id = itemData.id;

            this.getPageDeail(id, itemData.opFlag); // 获取基本信息
        }

        this.dialogType = type;
    },

    methods: {
        // 获取页面详情
        getPageDeail(id, opFlag) {
            var _that = this;

            var tick;
            let params = {
                id: id
            };
            console.log('传递的参数：', params);

            _that.pageLoading = true;

            //详情
            API.iapropertyright.lookiaPropertyRightForPermissionsAuditDetail(params).then((res) => {
                if (res.code == '0000') {
                    console.log(res);

                    _that.pageData = res.result;
                    _that.infoForm = res.result;

                    _that.flowLogRes = res.result.flowLogRes; //审批情况 审批流程列表
                    if (_that.flowLogRes != null) {
                        for (let index = 0; index < _that.flowLogRes.length; index++) {
                            let element = _that.flowLogRes[index];

                            //样式处理
                            if (index == 0) {
                                element.style = 'margin-top: 0px;';
                            } else {
                                element.style = 'margin-top: 40px;';
                            }

                            //审核状态处理
                            switch (element.status) {
                                // 审核状态：2-已提交 3-已提交  4-审核驳回 5-审核通过
                                case 2:
                                    element.status = '待处理';
                                    break;
                                case 3:
                                    element.status = '已提交';
                                    break;
                                case 4:
                                    element.status = '审核驳回';
                                    break;
                                case 5:
                                    element.status = '审核通过';
                                    break;
                            }
                        }
                    }

                    //审批完成隐藏所有操作按钮
                    if (_that.pageData.flowStatusEnumStr != null && _that.pageData.flowStatusEnumStr === '审核通过(完成)') {
                        this.opShow = false;
                    }

                    //详情进入隐藏所有操作按钮
                    if (opFlag === '1') {
                        this.opShow = false;
                    }

                    _that.pageLoading = false;
                }
            });
        },

        //查看附件
        downFile(downId) {
            var reg = new RegExp('http://');

            if (reg.test(downId)) {
                var idIndex = downId.indexOf('id=');
                var idStr = downId.substring(idIndex, downId.length);

                if (idStr.indexOf('id=') != -1) {
                    window.location.href = window.baseUrl + '/sys/file/new/down?TOKEN=' + sessionStorage.getItem('token') + '&' + idStr;
                }
            } else {
                window.location.href = window.baseUrl + '/sys/file/new/down?TOKEN=' + sessionStorage.getItem('token') + '&id=' + downId;
            }
        },

        //- 通过或拒绝
        dataFormSubmit(type) {
            if (type == 1 && this.dataForm.checkReason == '') {
                // 拒绝
                this.$message.error('请填写审核意见，并说明拒绝原因');
                return;
            }

            var params = {
                checkReason: this.dataForm.checkReason,
                id: this.infoForm.id, //详情id
                checkStatus: type // 1:已通过;2:未通过
            };

            API.iapropertyright.forPermissionsApproveOrRejectAudit(params).then((data) => {
                if (data.code == '0000') {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1500,
                        onClose: () => {
                            this.closePage();
                        }
                    });
                }
            });
        },
        closePage() {
            this.$router.go(-1);
        }
    }
};
</script>
<style scoped>
.viewer_img {
    position: relative;
    width: 100px;
    height: 100px;
}
</style>
